<template>
  <el-row class="rowContent" :gutter="20" style="width: 100%">
    <div class="leftContent">
      <div class="grid-content">
        <div class="contentTop" v-if="$i18n.locale == 'zh'"></div>
        <div class="contentTop1" v-else></div>
        <!-- <div class="contentText"></div> -->
        <div class="contentTextNext" v-if="$i18n.locale == 'zh'"></div>
        <div style="height: 560px" class="contentTextNext1" v-else></div>

        <div class="contentTextThree" v-if="$i18n.locale == 'zh'"></div>
        <div style="margin-top: -50px" class="contentTextThree1" v-else></div>

        <!-- <el-row>
          <banner></banner>
        </el-row>
        <el-row>
          <router-link to="/authorWelfare">
            <img
              src="../../assets/active.png"
              style="width: 100%"
              alt="作者福利"
            />
          </router-link>
        </el-row> -->
        <el-row>
          <!-- <router-link  to="/activity"> -->
          <!-- 站内活动 -->
          <!-- <el-card shadow="hover">
            <lowActi></lowActi>
          </el-card> -->

          <!-- </router-link> -->
        </el-row>
        <div>
          <!-- <router-link to="/improveInfor">完善资料</router-link>	 -->
        </div>
        <el-row>
          <!-- <router-link  to="/news"> -->
          <!-- <el-card shadow="hover">
            <lowNews></lowNews>
          </el-card> -->
          <!-- </router-link> -->
        </el-row>
      </div>
    </div>
    <div class="rightContent">
      <div>
        <el-row>
          <!-- <div class="userContent" shadow="hover" v-if="newData">
            <userBox></userBox>
          </div> -->
          <el-card class="userContent" shadow="hover" v-if="newData">
            <userBox></userBox>
          </el-card>

          <!-- <div shadow="hover" v-else> -->
          <el-card shadow="hover" v-else>
            <login></login>
          </el-card>
          <!-- </div> -->
        </el-row>
        <!-- <el-row>
          <el-card shadow="hover">
            <qrcode></qrcode>
          </el-card>
        </el-row> -->
        <!-- <div class="right" >
		  	<login></login>
		  	<qrcode></qrcode>
		  </div> -->
      </div>
    </div>
  </el-row>
</template>

<script>
import base from "@/assets/base.css";
import banner from "./component/banner.vue";
import lowActi from "./component/lowActivity.vue";
import lowNews from "./component/lowNews.vue";
import login from "./component/login.vue";
import qrcode from "./component/qrcode.vue";
import userBox from "./component/userBox.vue";
export default {
  data() {
    return {
      userLogin: false,
    };
  },
  methods: {},
  mounted() {
     history.pushState(null, null, document.URL);
    window.addEventListener("popstate", function () {
      history.pushState(null, null, document.URL);
    });
    //  if (
    //     Object.keys(this.$store.state.userInfo).length > 0 &&
    //     this.$store.state.userInfo.role === 0
    //   ) {
    //     this.userLogin = true;
    //   } else {
    //     this.userLogin = false;
    //   }
  },
  computed: {
    newData: function () {
      return this.$store.state.userInfo.token;
    },
  },
  
  updated() {
    // this.$store.state.userInfo = {}
    // if (
    //   Object.keys(this.$store.state.userInfo).length > 0 &&
    //   this.$store.state.userInfo.role === 0
    // ) {
    //   this.userLogin = true;
    // } else {
    //   this.userLogin = false;
    // }
  },
  created() {
    // if (
    //   Object.keys(this.$store.state.userInfo).length > 0 &&
    //   this.$store.state.userInfo.role === 0
    // ) {
    //   this.userLogin = true;
    // } else {
    //   this.userLogin = false;
    // }
  },
  components: {
    banner: banner,
    login: login,
    qrcode: qrcode,
    lowActi: lowActi,
    lowNews: lowNews,
    userBox: userBox,
  },
};
</script>
<style lang="scss" scoped="scoped">
.userContent {
  height: 357px;
}
.leftContent {
  width: 764px;
  box-sizing: content-box;
  margin-right: 20px;
}
.rowContent {
  display: flex;
  justify-content: space-between;
}
.rightContent {
  box-sizing: content-box;
  width: 416px;
  padding: 0;
}
::v-deep .el-card {
  border: none;
  border-radius: 8px;
  margin-top: 247px;
}
.contentText {
  width: 100%;
  height: 850px;
  // background:url('../../assets/authorWelfare/01.png') no-repeat top ;
  background-size: cover;
}
.contentTextNext {
  width: 764px;
  height: 400px;
  background: url("../../assets/authorWelfare/zzfl2.png") no-repeat top;
  background-size: cover;
}
.contentTextNext1 {
  width: 764px;
  height: 400px;
  background: url("../../assets/authorWelfare/133zhong.png") no-repeat top;
  // background-size: cover;
}
.contentTextThree {
  width: 764px;
  height: 480px;
  background: url("../../assets/authorWelfare/zzfl3.png") no-repeat top;
  background-size: cover;
}
.contentTextThree1 {
  width: 764px;
  height: 480px;
  background: url("../../assets/authorWelfare/133xia.png") no-repeat center;
  // background-size: cover;
}
.contentTop {
  width: 764px;
  height: 480px;
  background: url("../../assets/authorWelfare/zzfl1.png") no-repeat center;
  background-size: cover;
}
.contentTop1 {
  width: 764px;
  height: 480px;
  background: url("../../assets/authorWelfare/133tou.png") no-repeat center;
  background-size: cover;
}
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}
.router-link-active {
  font-size: 10px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #21d4cf;
  line-height: 14px;
}
.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

// .grid-content {
//   border-radius: 4px;
//   min-height: 36px;
//   border-radius: 8px;
//   display: flex;
//   flex-direction: column;
//   align-items: center;
// }

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.centindex {
  display: flex;
  flex-direction: row;

  el-row {
    flex: 1;
  }
}
</style>
